<template>
  <section class="edit">
    <group>
      <x-input :placeholder = " $t('old phone') " is-type="china-mobile" v-model="old_phone">
        <img slot="restricted-label" style="display:inline-block;vertical-align:middle;width:0.28rem;height:0.4rem;" src="../../assets/img/phone.png" width="24" height="24">|||||
      </x-input>
      <x-input :placeholder="$t('code')"  class="weui-vcode" v-model="old_captcha">
        <img slot="restricted-label" style="display:inline-block;vertical-align:middle;width:0.28rem;height:0.4rem;" src="../../assets/img/verifyCode.png" width="24" height="24">
        <x-button slot="right" type="primary" mini @click.native="sendCode">{{sen_code}}</x-button>
      </x-input>
      <x-input :placeholder="$t('new phone')" is-type="china-mobile" v-model="new_phone">
        <img slot="restricted-label" style="display:inline-block;vertical-align:middle;width:0.28rem;height:0.4rem;" src="../../assets/img/phone.png" width="24" height="24">
      </x-input>

      <x-input :placeholder="$t('code')"  class="weui-vcode" v-model="new_captcha">
        <img slot="restricted-label" style="display:inline-block;vertical-align:middle;width:0.28rem;height:0.4rem;" src="../../assets/img/verifyCode.png" width="24" height="24">
        <x-button slot="right" type="primary" mini @click.native="sendCode2">{{sen_code1}}</x-button>
      </x-input>
      <!--<input type="text" class="verify">-->
    </group>
    <p style="color: #898989;padding: .4rem 1rem" v-if="query.info">{{$t('want to edit')}}</p>
    <div class="btn-box">
      <x-button type="primary" @click.native="change" v-if="!query.info">{{$t('confirm')}}</x-button>
      <!--<x-button type="primary" @click.native="change">确定</x-button>-->
    </div>
  </section>
</template>
<i18n>
  old phone:
    en: Orginal Phone
    zh-CN: 请输入原来手机号
  new phone:
    en: New Phone
    zh-CN: 请输入新手机号
  title.editphone:
    en: Edit Phone
    zh-CN: 修改手机号
  sen_code:
    en: Sen Code
    zh-CN: 发送验证码
  resend:
    en: s resend
    zh-CN: s后重新发送
  resend code:
    en: resend code
    zh-CN: 重新发送验证码
</i18n>
<script>
  import {XInput, Group, XButton} from 'vux'

  export default {
    name: 'editPhone',
    components: {
      XInput,
      Group,
      XButton
    },
    data () {
      return {
        old_phone: '',
        old_captcha: '',
        buttonColor: ['#1D62F0', '#19D5FD'],
        new_phone: '',
        new_captcha: '',
        showLoading: false,
        verify: '',
        event: 'changemobile',
        event2: 'register',
        totalTime: 60,
        totalTime1: 60,
        canClick: true,
        sen_code: this.$t('sen_code'),
        resend_code: this.$t('resend code'),
        resend: this.$t('resend'),
        sen_code1: this.$t('sen_code'),
        resend_code1: this.$t('resend code'),
        resend1: this.$t('resend')
      }
    },
    created () {
      this.init()
    },
    computed: {
      query () {
        return this.$route.query
      }
    },
    methods: {
      init () {
        // this.postBefor()
        this.old_phone = this.query.info
      },
      // 点击发送验证码倒计时
      sendCode () {
        let vue = this
        vue.post({
          url: 'api/sms/before_send',
          success: function (data) {
            // console.log(data.data.sms_verify)
            vue.verify = data.data.sms_verify
            vue.post({
              url: '/api/sms/send',
              params: {
                mobile: vue.old_phone,
                event: vue.event,
                sms_verify: vue.verify
              },
              success: function (data) {
                if (data.code === 1) {
                  if (!vue.canClick) return
                  vue.canClick = false
                  vue.sen_code = vue.totalTime + vue.resend
                  let clock = window.setInterval(() => {
                    vue.totalTime--
                    vue.sen_code = vue.totalTime + vue.resend
                    if (vue.totalTime < 0) {
                      window.clearInterval(clock)
                      vue.sen_code = vue.resend_code
                      vue.totalTime = 60
                      vue.canClick = true
                    }
                  }, 1000)
                  vue.$vux.toast.text(data.msg)
                } else {
                  vue.$vux.toast.text(data.msg)
                }
                console.log(data)
              }
            })
          }
        })
      },
      sendCode2 () {
        let vue = this
        vue.post({
          url: 'api/sms/before_send',
          success: function (data) {
            // console.log(data.data.sms_verify)
            vue.verify = data.data.sms_verify
            vue.post({
              url: '/api/sms/send',
              params: {
                mobile: vue.new_phone,
                event: vue.event2,
                sms_verify: vue.verify
              },
              success: function (data) {
                if (data.code === 1) {
                  if (!vue.canClick) return
                  vue.canClick = false
                  vue.sen_code1 = vue.totalTime1 + vue.resend1
                  let clock = window.setInterval(() => {
                    vue.totalTime1--
                    vue.sen_code1 = vue.totalTime1 + vue.resend1
                    if (vue.totalTime1 < 0) {
                      window.clearInterval(clock)
                      vue.sen_code1 = vue.resend_code1
                      vue.totalTime1 = 60
                      vue.canClick = true
                    }
                  }, 1000)
                  vue.$vux.toast.text(data.msg)
                } else {
                  vue.$vux.toast.text(data.msg)
                }
                console.log(data)
              }
            })
          }
        })
      },
      change () {
        let vue = this
        vue.post({
          url: '/api/account/change_phone',
          params: {
            token: localStorage.token,
            old_phone: vue.old_phone,
            old_captcha: vue.old_captcha,
            new_phone: vue.new_phone,
            new_captcha: vue.new_captcha
          },
          success: function (data) {
            // console.log(data)
            if (data.code === 0) {
              vue.$vux.toast.text(data.msg)
              if (vue.old_captcha === '' && vue.new_captcha === '') {
                vue.$vux.toast.text(data.msg)
              }
            } else {
              vue.$vux.toast.text(data.msg)
              vue.$router.back(-1)
            }
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .edit {
    height: 100%;
    background-color: #fff;
    font-size: 0.28rem;
    color: #bbbbbb;
    .weui-btn_primary{
      background: #fff;
      color: #57a94f;
      border: 1px solid #57a94f;
    }
    .btn-box{
      padding: 0.3rem;
      button{
        background: #179b16;
        color: #fff;
        border: 1px solid #57a94f;
        padding: 0 8px;
        border-radius: 3px;
      }
    }
    .weui-cell{
      padding-top: 20px;
    }
    /*.btn-box {*/
      /*position: fixed;*/
      /*bottom: 0;*/
      /*width: 100%;*/
      /*padding: 15px;*/
      /*box-sizing: border-box;*/
    /*}*/
  }
</style>
